/**
 * 积分商城-商品详情
 */
'use strict';
import React, {
    Component
} from 'react'
import {
    hashHistory,
    Link
} from 'react-router'

import Header from './Common/Header'
import {
    HttpService,
    dateFormat,
    Tips
} from '../Tools'

import ConfirmBox from './Common/ConfirmBox'

export default class ProductMore extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: 0,
            data: {},
            jfGoodsArchives: {}
        }
        this.config = {
            title: '温馨提示'
        };
    }

    componentWillMount() {
        this.getDetail()
    }

    //获取详情
    getDetail() {
        HttpService.query({
            url: '/jf/goodsArchives/getJfGoodsArch',
            data: {
                token: sessionStorage.appToken,
                goodsArchId: this.props.params.id
            },
            async: false,
            success: (res => {
                if (res.code == 10140) {
                    if (res.data.jfGoodsArchives.actualNum == 0)
                        Tips('该商品已全部兑换')
                    this.setState({
                        data: res.data,
                        jfGoodsArchives: res.data.jfGoodsArchives
                    })
                }
            })
        })
    }

    /**
     * 关闭confirmBox
     */
    cfmCancel() {
        this.setState({
            show: 0
        });
    }

    /**
     * 确定
     * @returns {XML}
     */
    cfmSure() {
        this.setState({
            show: 0
        });
        if (this.config.sureName == '查看详情') {
            hashHistory.push(`/MyPackage`)
            _hmt.push(['_trackEvent', 'page', 'ProductDetails', '商品兑换成功']);
            return
        }
        _hmt.push(['_trackEvent', 'page', 'ProductDetails', '商品兑换']);

        let data = {
            token: sessionStorage.appToken,
            goodsArchId: this.props.params.id,
            num: 1
        }
        if (sessionStorage.userrole == '家长')
            data.babyId = sessionStorage.babyid
        HttpService.query({
            url: '/jf/goodsArchives/getGoods',
            data,
            async: false,
            success: (res => {
                if (res.code == 50006) {
                    this.config.content = '兑换成功'
                    this.config.cancelName = '确定'
                    this.config.sureName = '查看详情'
                    this.setState({
                        show: 1
                    });
                } else {
                    Tips(res.data)
                    _hmt.push(['_trackEvent', 'page', 'ProductDetails', '商品兑换失败']);
                }
            })
        })
    }


    /**
     * 点击兑换
     * @returns {XML}
     */
    exchange() {
        this.config.content = '是否继续兑换？'
        this.config.cancelName = '取消'
        this.config.sureName = '确定'
        this.setState({
            show: 1
        });
    }

    //图片地址错误
    imgErr(imgErr,e) {
        e.currentTarget.setAttribute('src', imgErr)
    }
    render() {
        const {
            show,
            data,
            jfGoodsArchives,
        } = this.state

        let unit = sessionStorage.userrole == '家长' ? '积分' : '荣誉值';
        return (
            <div className="product_details">
                <Header title="更多图文详情" />
                <div className="pdtlinfo pdtlinfo2">
                    <p className='title'>购买须知</p>
                    <div className='lists'>
                        <p>有效期</p>
                        <ul>
                            <li>
                                {dateFormat(new Date(jfGoodsArchives.beginTime),'-',false)}
                                至
                                {dateFormat(new Date(jfGoodsArchives.endTime),'-',false)}
                                {jfGoodsArchives.validRemark?
                                    <span>({jfGoodsArchives.validRemark})</span>:null
                                }
                            </li>
                        </ul>
                        <p>使用时间</p>
                        <ul>
                            <li>{jfGoodsArchives.useTime?
                                    <span>
                                        {jfGoodsArchives.useTime.replace(/\s/g,'').split('&')[0].replace('—','~')}
                                        ({jfGoodsArchives.useTime.replace(/\s/g,'').split('&')[1]})</span>
                                    :null}
                            </li>
                        </ul>
                        <p>使用规则</p>
                        <ul>
                            {
                                jfGoodsArchives.instructions?
                                jfGoodsArchives.instructions.split('<br />').map((item)=>{
                                    return <li>{item}</li>
                                }):null
                            }
                        </ul>
                    </div>
                </div>
                <div className="pdtlinfo">
                    <p className='title'>本单详情</p>
                        {
                            jfGoodsArchives.goodsPackage?
                            <table className='pmrtable'>
                                <tr>
                                    <th>套餐内容</th>
                                    <th>数量规格</th>
                                    <th>套餐价值</th>
                                </tr>
                                {JSON.parse(jfGoodsArchives.goodsPackage).map((item)=>{
                                    return (
                                        <tr>
                                            <td>{item.name}</td>
                                            <td>{item.number}份</td>
                                            <td>{item.price}元</td>
                                        </tr>
                                    )
                                })}
                            </table>
                            :null
                        }
                        <div className='imgdeal' dangerouslySetInnerHTML={{__html: decodeURIComponent(jfGoodsArchives.contents)}} />
                </div>
                <div className="footer_bottom"></div>
                {jfGoodsArchives.actualNum==0?null:
                <div className="product_pay ">
                    <div className="price_left price">
                        <span className="title">{unit}:</span>
                        <span className="number all_punkte">{jfGoodsArchives.consumeCredit}</span>
                    </div>
                    <span className="buttom" onClick={this.exchange.bind(this)}>立即兑换</span>
                </div>}
                <ConfirmBox config={this.config} show={show} cancel={this.cfmCancel.bind(this)} sure={this.cfmSure.bind(this)}/>
            </div>
        )
    }
}
